<div id="top-left">
  <span class="location-title">安全配置</span>
</div>
<div class="main-content">
  <ul nz-menu nzMode="horizontal" class="location-menu">
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/security']">
      账户设置
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/profile']">
      基本资料
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/password']">
      密码修改
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/real-auth']">
      实名认证
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/user/refuse-words']">
      拒绝词汇
    </li>
  </ul>
  <form style="max-width: 500px;" nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="oldPassword">旧密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入您的旧密码!">
        <nz-input-group nzPrefixIcon="lock" class="input-item">
          <input type="password" nz-input formControlName="oldPassword" placeholder="旧密码" />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="password">新密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="请输入您的新密码!">
        <nz-input-group nzPrefixIcon="lock" class="input-item">
          <input type="password" nz-input formControlName="password" placeholder="密码4-20数字或英文" />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="confrimPassword">确认新密码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="passwordErrorTpl">
        <nz-input-group nzPrefixIcon="lock" class="input-item">
          <input type="password" nz-input formControlName="confrimPassword" placeholder="确认新密码" />
        </nz-input-group>
        <ng-template #passwordErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">
            请再次输入新密码
          </ng-container>
          <ng-container *ngIf="control.hasError('confirm')">
            两次密码输入不一致!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <span nzSpan="6"></span>
      <nz-form-control [nzSpan]="14" [nzOffset]="6">
        <button nz-button [nzType]="'primary'">提交</button>
      </nz-form-control>
    </nz-form-item>
  </form>
</div>
